<template>
  <div class="container">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :inline="true"
      label-width="180px"
      class="demo-ruleForm"
    >
      <div class="header">
        <el-form-item class="left" label="菜品名称:" prop="name">
          <el-input
            v-model="ruleForm.name"
            placeholder="请填写菜品名称"
            maxlength="20"
          />
        </el-form-item>
        <el-form-item class="right" label="菜品分类:" prop="categoryId">
          <el-select v-model="ruleForm.categoryId" placeholder="请选择菜品分类">
            <el-option
              v-for="item in dishList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </div>
      <div>
        <el-form-item label="菜品价格:" prop="price">
          <el-input
            v-model.number="ruleForm.price"
            placeholder="请设置菜品价格"
          />
        </el-form-item>
      </div>
      <div class="addbutton">
        <el-form-item label="口味做法配置:" prop="price">
          <div
            style="display: flex"
            v-for="(item, index) of ruleForm.flavors"
            :key="item.label"
          >
            <el-select
              style="width: 150px; margin: 0 20px 0 80px"
              placeholder="请输入口味"
              value-key="label"
              v-model="ruleForm.flavors[index]"
            >
              <el-option
                v-for="item in options"
                :key="item.label"
                :label="item.label"
                :value="item"
              />
            </el-select>
            <div>
              <el-tag
                v-for="k of ruleForm.flavors[index].value"
                type="warning"
                closable
                :key="k"
                @close="handleClose(k, ruleForm.flavors[index].value)"
                >{{ k }}</el-tag
              >
            </div>
            <el-button
              type="text"
              style="color: red; margin-left: 20px"
              @click.prevent="removeDomain(index)"
              >删除</el-button
            >
          </div>

          <el-button type="warning" @click="addDomain">+ 添加口味</el-button>
        </el-form-item>
      </div>
      <div class="image">
        <el-form-item label="菜品图片:" class="uploadImg">
          <el-upload
            class="avatar-uploader"
            :action="`${env}/common/upload`"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img
              v-if="ruleForm.image"
              :src="`${env}/common/download?name=${ruleForm.image}`"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon" />
          </el-upload>
        </el-form-item>
      </div>
      <div class="desc">
        <el-form-item label="菜品描述:" prop="region">
          <el-input
            v-model="ruleForm.description"
            style="width: 600px"
            type="textarea"
            placeholder="菜品描述，最长200字"
            maxlength="200"
          />
        </el-form-item>
      </div>
      <div class="footer">
        <el-form-item>
          <el-button @click="$router.push({ name: 'Dish' })"> 取消 </el-button>
          <el-button type="warning" @click="submitForm('ruleForm')">
            保存
          </el-button>
          <el-button type="info" @click="submitForm('ruleForm')">
            保存并继续添加菜品
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </div>
</template>

<script>
import { addDish, editDish, getCategoryList } from "@/api/dish";
export default {
  data() {
    return {
      env: process.env.VUE_APP_BASE_API,
      dishList: [],
      ruleForm: {
        name: "",
        price: "",
        flavors: [],
        image: "",
        description: "",
        categoryId: "",
        status: 1,
        code: "",
      },
      options: [
        {
          value: ["无糖", "少糖", "半糖", "多糖", "全糖"],
          label: "甜味",
          showOption: false,
        },
        {
          value: ["热饮", "常温", "去冰", "少冰", "多冰"],
          label: "温度",
          showOption: false,
        },
      ],
      imageurl: "",
      value: "",
      actionType: "",
    };
  },
  created() {
    this.getDishList();
  },
  methods: {
    handleClose(tag, arr) {
      arr.splice(arr.indexOf(tag), 1);
    },
    addDomain() {
      this.ruleForm.flavors.push({
        value: [],
        label: "",
        showOption: false,
      });
    },
    removeDomain(index) {
      this.ruleForm.flavors.splice(index, 1);
    },
    getDishList() {
      getCategoryList({ type: 1 }).then((res) => {
        this.dishList = res.data;
      });
    },
    submitForm() {
      let data = JSON.parse(JSON.stringify(this.ruleForm));
      data.flavors = data.flavors.map((item) => {
        return {
          name: item.label,
          value: JSON.stringify(item.value),
          showOption: false,
        };
      });
      data.price = data.price * 100;
      if (this.actionType === "add") {
        addDish(data).then((res) => {
          this.$message.success("菜品添加成功！");
        });
      } else {
        editDish(data).then((res) => {
          this.$message.success("菜品修改成功！");
        });
      }
    },
    handleAvatarSuccess(res) {
      this.ruleForm.image = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  .el-form {
    margin-top: 60px;
    margin-left: 100px;
    margin-right: 100px;
    .header {
      display: flex;

      .left {
        float: left;
      }

      .right {
        float: right;
      }
    }
    .addbutton {
      .demo-dynamic {
        margin-top: 0px;
      }
    }
    .image {
      .uploadImg {
        .avatar-uploader {
          border: 1px dashed #c0d7e2;
          border-radius: 6px;
          cursor: pointer;
          position: relative;
          overflow: hidden;
        }

        .avatar-uploader:hover {
          border-color: #409eff;
        }

        .avatar-uploader-icon {
          font-size: 28px;
          color: #8c939d;
          width: 178px;
          height: 178px;
          line-height: 178px;
          text-align: center;
        }

        .avatar {
          width: 178px;
          height: 178px;
          display: block;
        }
      }
    }

    .footer {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
  }
}
</style>
